<template>
  <view class="container">
    <custom-nav title="" theme="blue" :isPopup="false" iconType="circle"></custom-nav>
    <view class="content">
      <view class="search-top">
        <view class="top-title">全平台资源库</view>
        <view class="top-text">精准搜索 实时更新</view>
      </view>

      <view class="search-con">
        <search-card :searchConf="searchConf" :searchForm="searchForm"></search-card>
      </view>
    </view>

    <view class="search-bottom">
      <view class="search-btn" @click="searchFn"><custom-btn>立即搜索</custom-btn></view>
    </view>

    <!-- 年龄、身高、地区弹窗 -->
    <custom-popup>
      <view class="popup-con">
        <view class="popup-title">对<text :class="genderInfo.class">{{genderInfo.gender}}</text>{{popupTitle}}</view>
        <view class="popup-text">{{searchForm[popupMode]}}</view>
        <custom-picker :mode="popupMode" :modelData="searchForm"></custom-picker>
        <view class="s-btn" @click="submitFn"><custom-btn>完成</custom-btn></view>
      </view>
    </custom-popup>

    <!-- 地区选择提示弹窗 -->
    <custom-msg ref="msgRef" @confirm="confirmFn"></custom-msg>

    <!-- 搜索加载状态 -->
    <loading-card ref="loadRef"></loading-card>
  </view>
</template>

<script setup>
import SearchCard from "./components/search-card.vue";
import LoadingCard from "./components/loading-card.vue";

import { searchConfig } from "./config";
import { getItem } from "@/utils/storage";
import useStore from "@/store";
const { common, person } = useStore();

const searchForm = reactive({
  age: "不限",
  height: "不限",
  edu: ["不限"],
  region: "",
  income: ["不限"],
  marriage: ["不限"],
  house: ["不限"],
  car: ["不限"],
  at_city: [],
});
const msgRef = ref();
const loadRef = ref();
const popupMode = ref("");
const popupTitle = ref("");
const genderInfo = computed(() => {
  const { gender } = getItem("user_info");
  const sexs = {
    男: {
      gender: "女方",
      class: "girl-text",
    },
    女: {
      gender: "男方",
      class: "boy-text",
    },
  };

  return sexs[gender];
});
// 获取用户现居地
const userRegion = computed(() => {
  const { at_city } = getItem("user_info") || {};
  searchForm.at_city = [at_city];
  return at_city;
});

const openPopup = (prop, label) => {
  if (prop == "region") {
    const len = searchForm.at_city?.length;
    if (len >= 2) return;
  }
  popupMode.value = prop;
  popupTitle.value = label;
  common.updatePopupOpen(true, "search");
};

// 页面数据配置
const searchConf = reactive(
  searchConfig({ openPopup, region: userRegion.value })
);

// 检查数值是否符合正确逻辑
const isCheckNum = (m) => {
  let flag = true;
  if (searchForm[m] != "不限") {
    const params = searchForm[m].split("到");

    const min = params[0].match(/^\d+/);
    const max = params[1].match(/^\d+/);

    const tObj = {
      age: "年龄",
      height: "身高",
    };
    if (min || max) {
      if (Number(min) > Number(max)) {
        uni.showToast({
          title: tObj[m] + "选择区间格式不正确",
          icon: "none",
        });
        common.updatePopupDisabled(true);
        flag = false;
        return;
      }
      if (Number(max) < Number(min)) {
        uni.showToast({
          title: tObj[m] + "选择区间格式不正确",
          icon: "none",
        });
        common.updatePopupDisabled(true);
        flag = false;
        return;
      }
    }
  }

  return flag;
};
const submitFn = () => {
  const m = toRaw(popupMode.value);
  if (m == "region") {
    msgRef.value.open();
    return;
  }

  if (!isCheckNum(m)) return;
  common.updatePopupDisabled(false);
  common.updatePopupOpen(false, "search");
};

// 地区选择
const confirmFn = () => {
  const city = searchForm.region?.split(",")[1];
  searchConf.forEach((v) => {
    if (v.prop == "region") {
      v.options.splice(1, 1, { active: true, value: 2, label: city });
    }
  });
  searchForm.at_city = [userRegion.value, city];
  msgRef.value.close();
  common.updatePopupOpen(false, "search");
};

const fetchSearchParams = () => {
  const params = JSON.parse(JSON.stringify(searchForm));
  const where = {};
  delete params.region;
  for (const k in params) {
    where[k] = params[k];
    if (params[k] == "不限") {
      where[k] = [];
    } else {
      if (k == "age") {
        const arr = params[k].replaceAll("岁", "");
        where[k] = arr.split("到");
      }

      if (k == "height") {
        const arr = params[k].replaceAll("cm", "");
        where[k] = arr.split("到");
      }
      if (where[k][0] == "不限") where[k][0] = 0;
      if (where[k][1] == "不限") where[k][1] = 9999;
    }

    where[k].forEach((v, i) => {
      if (v.includes("/")) {
        const nVal = v.split("/");
        where[k].splice(i, 1, nVal[0], nVal[1]);
      }
    });
  }

  return where;
};

// 立即搜索
const searchFn = () => {
  if (!isCheckNum("age")) return;
  if (!isCheckNum("height")) return;
  const where = fetchSearchParams();
  const searchParams = JSON.stringify(where);
  person.updateSearchParams(searchParams);
  loadRef.value.open();
  person.getPersonList(1).then((res) => {
    uni.navigateTo({ url: "/subPages/search/result" });
    loadRef.value.close();
  });
};

onUnload(() => {
  common.updatePopupOpen(false, "search");
});
</script>

<style lang=scss scoped>
@import "@/styles/global.scss";
.content {
  background: transparent;
}

.search-top {
  padding: 50rpx;
  font-family: Microsoft YaHei UI, Microsoft YaHei UI;
  .top-title {
    font-weight: bold;
    font-size: 72rpx;
    line-height: 80rpx;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(180deg, #fffffa 0%, #ffe500 100%);
    background-clip: text;
    margin-bottom: 20rpx;
  }
  .top-text {
    color: #fff;
    font-weight: bold;
    font-size: 72rpx;
  }
}

.search-con {
  border-radius: 40rpx 40rpx 0 0;
  background: #fff;
  padding: 20rpx 50rpx;
}

.search-bottom {
  padding: 40rpx 50rpx 120rpx;
  background: #fff;
  box-shadow: 0rpx -10rpx 10rpx 0rpx rgba(0, 0, 0, 0.05);
  position: relative;
  .search-btn {
    width: 650rpx;
    height: 120rpx;
    line-height: 120rpx;
    font-weight: 800;
    font-size: 36rpx;
    color: #fff;
    background: linear-gradient(
      180deg,
      rgba(241, 55, 64, 0.9) 0%,
      #f13740 100%
    );
    box-shadow: 0rpx 20rpx 40rpx 0rpx rgba(241, 55, 64, 0.25);
    border-radius: 120rpx;
  }
}

.popup-con {
  border-radius: 40rpx 40rpx 0 0;
  background: #fff;
  padding: 60rpx 70rpx;
  text-align: center;
  .popup-title {
    font-size: 48rpx;
    color: #000;
    font-weight: 800;
    padding-bottom: 20rpx;
  }
  .popup-text {
    font-weight: bold;
    font-size: 32rpx;
    color: #f65952;
  }
}

.s-btn {
  width: 490rpx;
  height: 120rpx;
  line-height: 120rpx;
  background: #f65952;
  border-radius: 120rpx;
  font-weight: 800;
  font-size: 36rpx;
  color: #fff;
  margin: 60rpx auto;
}
</style>